<template>
  <div class="container">
    <h1 class="topTitle">标绘</h1>
    <div style="height: 600px; width: 100%">
      <l-map class="map" ref="map" :options="mapOptions" @ready="doSomethingOnReady()">
        <l-control-layers > </l-control-layers>
        <l-wms-tile-layer
                v-for="layer in layers"
                :key="layer.name"
                :base-url="layer.url"
                :layers="layer.layers"
                :visible="layer.visible"
                :name="layer.name"
                :layer-type="layer.layertype">
        </l-wms-tile-layer>

        <!--<l-tile-layer :url="mapOptions.url"></l-tile-layer>-->
        <l-control-zoom position="topleft" zoom-in-title="放大" zoom-out-title="缩小"></l-control-zoom>
      </l-map>
    </div>
  </div>
</template>

<script>

  import * as L from "leaflet";

  export default {
  name: "DrawLayerPage",
  components: {
  },
  data() {
    return {
      map:null,
      //地图参数
      mapOptions:{
        attributionControl :false,
        zoomControl:false,
        minZoom: 2,
        maxZoom: 14,
        zoom: 6,
        center: {'lon':116.404,'lat':39.915},
        preferCanvas: true,
        url: 'http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
        attribution:  '&copy; WebGis',
      },
      layers: [
        {
          url:"http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
          name: '底图',
          visible: true,
          format: 'image/png',
          layers: 'nexrad-n0r-900913',
          transparent: false,
          attribution: "图层演示",
          layertype:"base"
        },
        {
          url:"http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",
          name: 'WMS图层演示',
          visible: false,
          format: 'image/png',
          layers: 'nexrad-n0r-900913',
          transparent: true,
          attribution: "图层演示",
          layertype:"overlay"
        }
      ],
      //工具管理
      measure_toolbox:{
        instance:null,
        options:{
          position: 'topleft',
          draw: {
            polyline: {
              shapeOptions: {
                color: '#f357a1',
                weight: 10
              }
            },
            polygon: {
              allowIntersection: false, // Restricts shapes to simple polygons
              drawError: {
                color: '#e1e100', // Color the shape will turn when intersects
                message: '<strong>操作有误!<strong>  操作有误!' // Message that will show when intersect
              },
              shapeOptions: {
                color: '#bada55'
              }
            },
            circle: false, // Turns off this drawing tool
            rectangle: {
              shapeOptions: {
                clickable: true
              }
            },
            marker: {

            }
          },
          edit: {
            featureGroup: null, //REQUIRED!!
            remove: true
          }
        },
        visible:false

      },
      //工具管理
      mapWindowStyle: {
        height: '100px'
      },
    }
  },
  methods: {
    doSomethingOnReady() {
      this.map = this.$refs.map.mapObject

      /**语言设置**/
      L.drawLocal.draw.toolbar.buttons.rectangle = '矩形';
      L.drawLocal.draw.toolbar.buttons.marker = '图标';
      L.drawLocal.draw.toolbar.buttons.circlemarker = '圆图标';
      L.drawLocal.draw.toolbar.buttons.polyline = '折线';
      L.drawLocal.draw.toolbar.buttons.circle = '圆形';
      L.drawLocal.draw.toolbar.buttons.polygon = '多边形';

      L.drawLocal.draw.toolbar.finish.title = "完成绘制";
      L.drawLocal.draw.toolbar.finish.text = "完成";
      L.drawLocal.draw.toolbar.actions.title = "取消绘制";
      L.drawLocal.draw.toolbar.actions.text = "取消";
      L.drawLocal.draw.toolbar.undo.title = "撤销上一个点";
      L.drawLocal.draw.toolbar.undo.text = "撤销";

      L.drawLocal.draw.handlers.circle.tooltip = "点击拖拽一个圆";
      L.drawLocal.draw.handlers.circlemarker.tooltip = "点击生成圆图标";
      L.drawLocal.draw.handlers.marker.tooltip = "点击生成图标";
      L.drawLocal.draw.handlers.polygon.tooltip.start = "点击开始绘制图形";
      L.drawLocal.draw.handlers.polygon.tooltip.cont = "点击继续绘制图形";
      L.drawLocal.draw.handlers.polygon.tooltip.end = "点击第一个点结束绘制图形";
      L.drawLocal.draw.handlers.polyline.tooltip.start = "点击开始绘制线";
      L.drawLocal.draw.handlers.polyline.tooltip.cont = "点击继续绘制线";
      L.drawLocal.draw.handlers.polyline.tooltip.end = "点击最后点结束绘制线";
      L.drawLocal.draw.handlers.polyline.error = "<strong>操作有误:</strong> 图形边界不能交叉!";
      L.drawLocal.draw.handlers.rectangle.tooltip.start = "点击开始绘制矩形";
      L.drawLocal.draw.handlers.simpleshape.tooltip.end  = "释放鼠标结束绘制";

      L.drawLocal.edit.toolbar.actions.save.title = "保存更改";
      L.drawLocal.edit.toolbar.actions.save.text = "保存";
      L.drawLocal.edit.toolbar.actions.cancel.title = "取消更改，放弃所有刚刚的更改";
      L.drawLocal.edit.toolbar.actions.cancel.text = "取消";
      L.drawLocal.edit.toolbar.actions.clearAll.title = "清除所有已绘制的图层";
      L.drawLocal.edit.toolbar.actions.clearAll.text = "清除所有";

      L.drawLocal.edit.toolbar.buttons.edit = "编辑";
      L.drawLocal.edit.toolbar.buttons.editDisabled = "无可编辑图层";
      L.drawLocal.edit.toolbar.buttons.remove = "删除图层";
      L.drawLocal.edit.toolbar.buttons.removeDisabled = "无可删除图层";

      L.drawLocal.edit.handlers.edit.tooltip.text = "拖动鼠标或者标记元素.";
      L.drawLocal.edit.handlers.edit.tooltip.subtext = "点击撤销操作.";
      L.drawLocal.edit.handlers.remove.tooltip.subtext = "点击删除一个元素..";

      this.measure_toolbox.options.edit.featureGroup =  new L.FeatureGroup();
      this.$refs.map.mapObject.addLayer(this.measure_toolbox.options.edit.featureGroup);
      this.measure_toolbox.instance = new L.Control.Draw(this.measure_toolbox.options);
      this.measure_toolbox.instance.main = this.$refs.map.mapObject;
      let that  = this;
      this.$refs.map.mapObject.on(L.Draw.Event.CREATED, function (e) {
        console.log(e)
        const type = e.layerType;
        const layer = e.layer;
        if (type === L.Draw.Marker.TYPE) {
          layer.bindPopup('临时marker');
        } else if (type === L.Draw.CircleMarker.TYPE) {
          layer.bindPopup('临时圈注点');
        }
        /*if(type === L.Draw.Polygon.TYPE){
          let top1_latlngs = layer.editing.latlngs
          let logs = '';
          for(let index in top1_latlngs[0][0]){
            let top3 = top1_latlngs[0][0][index]
            logs +='['+top3.lat+','+top3.lng+'],'
          }
          console.log(logs)
        }*/
        that.measure_toolbox.options.edit.featureGroup.addLayer(layer);
      });
      this.$refs.map.mapObject.on('draw:edited', function (e) {
        var layers = e.layers;
        layers.eachLayer(function (layer) {
          //do whatever you want; most likely save back to db
          console.log(layer)

        });
      });
      this.measure_toolbox.instance.addTo(this.$refs.map.mapObject);//添加到地图上
    },
  },
}
</script>

<style lang="stylus" scoped>
.container
  width: 100%
  h1.topTitle
    text-align: center
</style>